import * as echarts from 'echarts';
import {useEffect,useState} from 'react'
import {GetCountStaff} from '@/api/index'
function Echarts() {
  const [option,setOption]  = useState({
    // 标题
    title: {
      text: '我要运动新增员工',
      left:"center"
    },
    // 鼠标放上提示
    tooltip: {},
    // x轴线
    xAxis: {
      data: []
    },
    legend:{ // 图例
      data:["新增员工"],
      left:"right"
    },
    // y轴线
    yAxis: {},
    // 系列数据
    series: [
      {
        name: '新增员工', // 名称
        type: 'line', // 类型
        lineStyle:{width:4},
        smooth:true,
        data: [] //数据
      }
    ]
  })
  useEffect(()=>{
    var myChart = echarts.init(document.getElementById('main'),"light");
    // 绘制图表
    myChart.setOption(option);
   
  },[option])
  
  useEffect(()=>{
    getCount();
  },[])
  // 获取接口的数据
  function getCount(){
    GetCountStaff()
    .then(res=>{
      var op = option;
      // 修改x轴线
      op.xAxis.data = res.data.data.map(item=>item.day)
      // 修改系列数据
      op.series[0].data = res.data.data.map(item=>item.staff)
      // 更新option （会触发图表的更新）
      setOption({...op});
    })
  }
  return ( <div>
    图表
    <div id='main' style={{width:'100%',height:600}}></div>
  </div> );
}

export default Echarts;